<template>
  <el-card class="box-card">
    <!-- 表格头部折叠框 -->
    <template #header
      ><h3>{{ tableAttrs.name }}</h3></template
    >
    <el-collapse v-model="activeNames">
      <!-- 提示信息 -->
      <el-collapse-item name="1">
        <template #title>提示</template>
        <ul class="info">
          <li v-for="(item, index) in tableAttrs.infos" :key="index">
            {{ item }}
          </li>
        </ul>
      </el-collapse-item>
      <el-collapse-item name="2" v-if="isScreen">
        <template #title>筛选</template>
        <!-- 筛选表单 -->
        <slot></slot>
      </el-collapse-item>
    </el-collapse>
    <el-space style="padding: 20px 0">
      <slot name="buttons"></slot>
    </el-space>
    <!-- 表格主体 -->
    <el-table
      v-bind="tableAttrs.attrs"
      @current-change="handleCurrentChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-bind="item"
        v-for="(item, index) in tableAttrs.column"
        :key="index"
      >
        <template #default="props" v-if="item.type === 'expand'">
          <slot name="expand" :props="props"></slot>
        </template>
      </el-table-column>
      <el-table-column
        width="150"
        align="center"
        label="操作"
        v-if="tableAttrs.controller"
      >
        <!-- 表格操作按钮 -->
        <template #default="{ row }">
          <el-dropdown>
            <el-button type="text" icon="el-icon-setting"></el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="(item, index) in tableAttrs.controller"
                  :key="index"
                  @click="handleController(item, row)"
                  >{{ item }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <el-space style="padding: 20px 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </el-space>
  </el-card>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "CommonTable",
  props: {
    tableAttrs: {
      type: Object,
      default: {},
    },
    isScreen: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, { emit }) {
    const handleCurrentChange = (val) => {
      emit("single", val);
    };

    const handleSelectionChange = (val) => {
      emit("multiple", val);
    };

    const handleController = (type, row) => {
      emit("controller", type, row);
    };

    let activeNames = ["1"];

    return {
      handleCurrentChange,
      handleSelectionChange,
      handleController,
      activeNames,
    };
  },
});
</script>

<style scoped>
h2 {
  font-size: 20px;
  font-weight: bold;
}
#title {
  font-size: 16px;
}

h2 {
  font-size: 20px;
  font-weight: bold;
}
h3 {
  font-size: 16px;
  font-weight: 500;
}
.info {
  padding-left: 25px;
}
.info li {
  position: relative;
}
.info li::after {
  position: absolute;
  top: 50%;
  left: -10px;
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background-color: #333;
}
</style>